<template>
	<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
		<!-- 商品轮播 -->
		<view class="" style="position: relative;">
			<view class="share">
				<image @click="openTeam" style="width: 30px; height: 30px; margin-right: 10px;" src="../../../static/lw.png" mode="">
				</image>
				<!-- <image @click="shareHandle" style="width: 32px; height: 32px;" src="../../../static/share.png" mode="">
				</image> -->
			</view>
			<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
		</view>


		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-price__box">
					<view class="tui-pro-pricebox tui-padding">
						<view class="tui-pro-price">
							<view>
								<text>￥</text>
								<text class="tui-price">{{ formatPrice(storeInfo.price, 0) }}</text>
								<text>.{{ formatPrice(storeInfo.price, 1) }}</text>
							</view>
							<!-- <view class="tui-original-price tui-white__gray">￥199.00</view> -->
						</view>
						<view class="tui-sold tui-white__gray">
							<view class="tui-price-tag">{{ storeInfo.people }}人团</view>
							<text>已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}</text>
						</view>
					</view>
					<!-- <view class="tui-right__box">库存{{ storeInfo.stock }}{{ storeInfo.unitName }}</view> -->
					<view class="countdown tui-right__box">
						<view style="color: #333;">距离结束仅剩</view>
						<view class="" style="color: #333; display: flex;">
							<view v-if="day > 0" class="" style="margin-right: 2px;">{{day}}天</view>
							<view class="bg">{{hour}}</view>
							<view class="" style="margin-right: 2px;">:</view>
							<view class="bg">{{min}}</view>
							<view class="" style="margin-right: 2px;">:</view>
							<view class="bg">{{second}}</view>
						</view>
					</view>
				</view>
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{ storeInfo.title }}</view>
				</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
			<view>
				<text>{{ attrTxt }}：</text>
				<text class="atterTxt">{{ attrValue }}</text>
			</view>
			<view class="iconfont icon-jiantou"></view>
		</view>

		<!-- 拼团信息 -->
		<view class="notice acea-row row-middle">
			<view class="num font-color-red">
				<text class="iconfont icon-laba"></text>
				已拼{{ storeInfo.sales }}{{ storeInfo.unitName }}
				<text class="line">|</text>
			</view>
			<view class="swiper-no-swiping swiper">
				<swiper class="swiper-wrapper" :options="swiperTip" :autoplay="true" :interval="3000">
					<block v-for="(item, itemNewIndex) in itemNew" :key="itemNewIndex">
						<swiper-item>
							<view class="line1">{{ item }}</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>

		<!-- 拼团人数，头像 -->
		<view class="assemble">
			<view v-for="(item, groupListindex) in groupList" :key="groupListindex">
				<view class="item acea-row row-between-wrapper" v-if="groupListindex < groupListCount">
					<view class="pictxt acea-row row-between-wrapper">
						<view class="pictrue">
							<image :src="item.avatar" class="image" />
						</view>
						<view class="text line1" v-text="item.nickname"></view>
					</view>
					<view class="right acea-row row-middle">
						<view>
							<view class="lack">
								<text>还差</text>
								<text class="font-color-red" v-text="item.count"></text>
								<text>人成团</text>
							</view>
							<count-down :isDay="true" :tipText="'剩余 '" :dayText="' 天 '" :hourText="' : '"
								:minuteText="' : '" :secondText="' '" :datatime="item.stopTime"></count-down>
						</view>
						<view class="spellBnt" @click="groupRule(item.id)">
							去拼单
							<text class="iconfont icon-jiantou"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="more" v-if="groupList.length > groupListCount" @click="setGroupListCount">
				查看更多
				<text class="iconfont icon-xiangxia"></text>
			</view>
		</view>

		<!-- 拼团规则 -->
		<view class="playWay">
			<view class="title acea-row row-between-wrapper">
				<view>拼团玩法</view>
			</view>
			<view class="way acea-row row-middle">
				<view class="item"> <text class="num">①</text>开团/参团 </view>
				<view class="iconfont icon-arrow"></view>
				<view class="item"> <text class="num">②</text>邀请好友 </view>
				<view class="iconfont icon-arrow"></view>
				<view class="item">
					<view> <text class="num">③</text>满员发货 </view>
				</view>
			</view>
		</view>

		<!-- 用户评价 -->
		<view class="userEvaluation">
			<view class="title acea-row row-between-wrapper">
				<view v-text="'用户评价(' + replyCount + ')'"></view>
				<view class="praise" @click="goReply">
					<text class="font-color-red" v-text="replyChance + '%'"></text>好评率
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<UserEvaluation :reply="reply"></UserEvaluation>
		</view>

		<!-- 产品介绍 -->
		<view class="product-intro">
			<!-- <text class="title"><text>产品介绍</text></text> -->
			<view class="title"
				style="background-color: #fff; width: 100%; height: 44px; margin: 0px;align-items: center;">产品介绍</view>
			<view class="conter" style="margin-top: 0px;" v-html="storeInfo.description"></view>
			<!-- <view class="conter" v-html=""></view> -->
		</view>

		<!-- 价格说明 -->
		<view class="price-shuoming"
			style="background-color: #fff; padding: 10px; margin-top: 10px; margin: 10px; border-radius: 5px;">

			<view class="price-intro">价格说明</view>

			<view class="text">划线价格：是商品的专柜价、吊牌价、正品零售价、指导价、曾经展示过的销售价等，并非原价，仅供参考。</view>
			<view class="text">未划线价格：是商品的实时价格，不会因具体表述形式的差异改变性质。具体成交价格会因商品参加促销活动，优惠券、积分抵扣等情形发生变化，最终以订单结算页面展示的价格为准。</view>
			<view class="text">
				*商家详情页以图片或文字标注的一口价、促销价、优惠价等价格，可能是通过优惠券、积分折扣、满减或特定的促销活动，在特定时间段内形成的价格，具体请以商家促销规则、优惠条件和结算页面的标价为准。</view>
			<view class="text">*此说明仅当出现价格比较时有效，若商家对商品的划线价做了特殊说明，则以特殊说明为准。</view>
			<view class="text">此页面下商品/服务的标题、价格、详情等信息均由商家发布，其准确性、真实性与合法性均由该商家负责。如消费者对服务的标题、价格、详情等信息有疑问的，请在购买前与商家工作人员沟通确认。
			</view>

		</view>



		<!-- 操作栏 -->
		<view class="tui-operation_margin"></view>

		<!--底部操作栏-->
		<view class="tui-operation" style="z-index: 2;">
			<view class="tui-operation" v-if="$store.getters.token||userInfo.uid">
				<view  class="tui-flex-1">
					<tui-button height="100rpx" :size="26" type="warning" shape="rightAngle" @click="openAlone">
						<view class="tui-btn__box">

							<view class="tui-flex-end">
								<view class="tui-size-26">￥</view>
								<view class="tui-size-36">{{ formatPrice(storeInfo.productPrice, 0) }}</view>
								<view class="tui-size-26">.{{ formatPrice(storeInfo.productPrice, 1) }}</view>
							</view>
							<view>直接报名</view>
						</view>
					</tui-button>
				</view>
				<view class="tui-flex-1">
					<tui-button height="100rpx" :size="26" type="danger" shape="rightAngle" @click="openTeam">
						<view class="tui-btn__box">

							<view class="tui-flex-end">
								<view class="tui-size-28">￥</view>
								<view class="tui-price-large tui-size-36">{{ formatPrice(storeInfo.price, 0) }}</view>
								<view class="tui-size-28">.{{ formatPrice(storeInfo.price, 1) }}</view>
							</view>
							<view>一键开团</view>
						</view>
					</tui-button>
				</view>
			</view>

			<view style="width: 100%;" v-else>
				<button class="cu-btn author-btn" open-type="getPhoneNumber" @getphonenumber="phoneLogin">授权登录</button>
			</view>

		<!-- 商品信息弹窗 -->
		<ProductWindow class="product-window-pt" v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
		
		</view>


		<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus"
			:posterData="posterData"></StorePoster>

	</view>
</template>

<script>
	// import { swiper, swiperSlide } from "vue-awesome-swiper";
	import {
		mapGetters
	} from "vuex";
	import cookie from '@/utils/store/cookie'
	import { mapState, mapMutations, mapActions } from 'vuex'
	import { wxappAuth, getUser } from '@/api/user'
	import dayjs from 'dayjs'
	import store from '@/store'
	
	import { login, authorize, getProvider } from '@/utils'
	import ProductConSwiper from '@/components/ProductConSwiper'
	import CountDown from '@/components/CountDown'
	import UserEvaluation from '@/components/UserEvaluation'
	import ProductWindow from '@/components/ProductWindow'
	import StorePoster from '@/components/StorePoster'
	import {
		getCombinationDetail
	} from '@/api/activity'
	import {
		postCartAdd
	} from '@/api/store'
	import {
		imageBase64
	} from '@/api/public'
	import {
		getCoupon,
		getCollectAdd,
		getCollectDel,
		getUserInfo
	} from '@/api/user'
	const NAME = 'GroupDetails'

	export default {
		name: 'GroupDetails',
		components: {
			ProductConSwiper,
			CountDown,
			UserEvaluation,
			// swiper,
			// swiperSlide,
			ProductWindow,
			StorePoster,
		},
		props: {},
		data: function() {
			return {
				domStatus: false,
				posterData: {
					image: '',
					title: '',
					price: '',
					code: '',
				},
				posterImageStatus: false,
				reply: [],
				replyCount: 0,
				replyChance: 0,
				imgUrls: [],
				storeInfo: {},
				itemNew: {},
				groupListCount: 2,
				groupList: {},
				attrTxt: '请选择',
				productValue: [],
				attrValue: '',
				swiperTip: {
					direction: 'vertical',
					autoplay: {
						disableOnInteraction: false,
						delay: 2000,
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true,
				},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				cartNum: 1,
				userCollect: false,

				endTime: null, // 设置拼团截止时间
				countdown: '',
				day: '0',
				hour: '00',
				second: '00',
				min: '00',
				
				
			}
		},

		computed: mapGetters(["userInfo", "token"]),

		watch: {
			$yroute: function(n) {
				var that = this
				if (n.name === NAME) {
					that.mountedStart()
				}
			},
		},
		onShow: function() {
			this.mountedStart()

		},
		methods: {

			// 微信用户手机号登录
			phoneLogin(e) {
				console.log('用户微信手机号登录', e)
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					console.log(e.mp.detail)
					getProvider()
						.then(provider => {
							console.log('当前的环境商', provider)
							if (!provider) {
								reject()
							}
							// uni登录
							// spread: cookie.get('spread'),
							uni.login({
								provider: provider,
								success: async loginRes => {
									console.log(loginRes)
									let code = loginRes.code // 获取开发code
									cookie.set('wxLoginCode', loginRes.code)
									wxappAuth({
											encryptedData: e.mp.detail.encryptedData,
											iv: e.mp.detail.iv,
											code: code,
											// spread: cookie.get('spread'),
											spread: getApp().globalData.promotionSpread,
										})
										.then(res => {
											console.log('登录成功,开始处理登录信息保存，并获取用户详情')
											uni.hideLoading()
											store.commit('login', res.data.token, dayjs(res.data
												.expires_time))
											store.dispatch('userInfo', true)
											getUserInfo()
												.then(user => {
													console.log('获取用户信息成功')
													uni.setStorageSync('uid', user.data.uid)
													store.dispatch('setUserInfo', user.data)
													this.$yrouter.reLaunch({
														path: cookie.get('redirect')
															.replace(/\ /g, ''),
													})
												})
												.catch(error => {
													console.log('获取用户信息失败')
												})
										})
										.catch(error => {
											console.log(error)
											console.log('登录接口调用失败')
										})
								}
							})
						})
						.catch(err => {})
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},


			
			shareHandle() {
				// this.posterImageStatus = !this.posterImageStatus;
				 wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

				   wx.updateAppMessageShareData({ 
				     title: '123', // 分享标题
				     desc: '444', // 分享描述
				     link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				     imgUrl: '', // 分享图标
				     success: function () {
				       // 设置成功
				     }
				   })
				 }); 

				// this.posterImageStatus = !this.posterImageStatus
				// this.posters = false
			},
			updateCountdown() {
				const now = new Date().getTime();
				const distance = this.endTime - now;

				if (distance < 0) {
					this.countdown = '已经结束';
					clearInterval(this.updateCountdown); // 结束倒计时后清除定时器
				} else {
					const days = Math.floor(distance / (1000 * 60 * 60 * 24));
					const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((distance % (1000 * 60)) / 1000);

					this.day = days;
					this.hour = hours;
					this.min = minutes;
					this.second = seconds;

					this.countdown = `${days}天${hours}小时${minutes}分${seconds}秒`;

				}
			},

			formatPrice(price, index) {
				// console.log(price)
				if (price) {
					return price.split('.')[index]
				}
				return ''
			},
			onShareAppMessage: function() {
				return {
					title: this.storeInfo.title,
					imageUrl: this.storeInfo.image,
					path: 'pages/activity/GroupDetails/index?id=' + this.storeInfo.id + '&spread=' + uni
						.getStorageSync('uid') + '&pageType=good&codeType=routine',
					success(res) {
						uni.showToast({
							title: '分享成功',
						})
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
						})
					},
				}
			},
			//收藏商品
			setCollect: function() {
				let that = this,
					id = that.storeInfo.id,
					category = 'product'
				if (that.userCollect) {
					getCollectDel(id, category).then(function() {
						that.userCollect = !that.userCollect
					})
				} else {
					getCollectAdd(id, category).then(function() {
						that.userCollect = !that.userCollect
					})
				}
			},
			mountedStart: function() {
				var that = this
				let id = that.$yroute.query.id
				getCombinationDetail(id).then(res => {
					that.userCollect = res.data.userCollect
					res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;"')
					that.$set(that.attr, 'productAttr', res.data.productAttr)
					that.$set(that, 'productValue', res.data.productValue)
					that.$set(that, 'storeInfo', res.data.storeInfo)
					that.$set(that, 'imgUrls', res.data.storeInfo.sliderImageArr)
					that.$set(that, 'itemNew', res.data.pinkOkList)
					that.$set(that, 'groupList', res.data.pink)
					that.$set(that, 'reply', [res.data.reply])
					that.$set(that, 'replyCount', res.data.replyCount)
					that.$set(that, 'replyChance', res.data.replyChance)
					that.posterData.image = that.storeInfo.image
					if (that.storeInfo.title.length > 30) {
						that.posterData.title = that.storeInfo.title.substring(0, 30) + '...'
					} else {
						that.posterData.title = that.storeInfo.title
					}
					that.posterData.price = that.storeInfo.pinkPrice
					that.posterData.code = that.storeInfo.code_base
					that.domStatus = true
					that.endTime = new Date(res.data.storeInfo.stopTime).getTime()
					setInterval(that.updateCountdown, 1000)
					console.log(this.storeInfo)
					that.DefaultSelect()
				})
			},
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr
				let value = []
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], 'index', 0)
					value.push(productAttr[i].attrValueArr[0])
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.sort().join(',')]
				console.log(productSelect)
				if (productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', productSelect.image)
					this.$set(this.attr.productSelect, 'price', productSelect.pinkPrice)
					this.$set(this.attr.productSelect, 'stock', productSelect.pinkStock)
					this.$set(this.attr.productSelect, 'unique', productSelect.unique)
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', value.sort().join(','))
					this.$set(this, 'attrTxt', '已选择')
				} else if (!productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
					this.$set(this.attr.productSelect, 'stock', 0)
					this.$set(this.attr.productSelect, 'unique', '')
					this.$set(this.attr.productSelect, 'cart_num', 0)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				} else if (!productSelect && !productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
					this.$set(this.attr.productSelect, 'stock', this.storeInfo.pinkStock)
					this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '')
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				}
			},
			getImageBase64: function() {
				let that = this
				imageBase64(this.posterData.image, that.posterData.code).then(res => {
					that.posterData.image = res.data.image
					that.posterData.code = res.data.code
				})
			},
			setPosterImageStatus: function() {
				// var sTop = document.body || document.documentElement;
				// sTop.scrollTop = 0;
				this.posterImageStatus = !this.posterImageStatus
			},
			groupRule: function(id) {
				var that = this
				that.$yrouter.push({
					path: '/pages/activity/GroupRule/index',
					query: {
						id,
					},
				})
			},
			goReply: function() {
				var that = this
				that.$yrouter.push({
					path: '/pages/shop/EvaluateList/index',
					query: {
						id: that.storeInfo.product_id,
					},
				})
			},
			setGroupListCount: function() {
				this.groupListCount = this.groupListCount + 2
			},
			//将父级向子集多次传送的函数合二为一；
			changeFun: function(opt) {
				if (typeof opt !== 'object') opt = {}
				let action = opt.action || ''
				let value = opt.value === undefined ? '' : opt.value
				this[action] && this[action](value)
			},
			changeattr: function(res) {
				var that = this
				that.attr.cartAttr = res
			},
			ChangeCartNum: function(res) {
				var that = this
				that.attr.productSelect.cart_num = 1
				that.cartNum = 1
				uni.showToast({
					title: '每人每次限购1' + that.storeInfo.unitName,
					icon: 'none',
					duration: 2000,
				})
			},
			//选择属性；
			ChangeAttr: function(res) {
				// 修改了规格
				let productSelect = this.productValue[res.value]
				if (productSelect) {
					this.attr.productAttr[res.indexw].index = res.indexn
					this.$set(this.attr.productSelect, 'image', productSelect.image)
					this.$set(this.attr.productSelect, 'price', productSelect.pinkPrice)
					this.$set(this.attr.productSelect, 'stock', productSelect.pinkStock)
					this.$set(this.attr.productSelect, 'unique', productSelect.unique)
					this.$set(this.attr.productSelect, 'cart_num', 1)
					this.$set(this, 'attrValue', res.value)
					this.$set(this, 'attrTxt', '已选择')
				} else {
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
					this.$set(this.attr.productSelect, 'price', this.storeInfo.pinkPrice)
					this.$set(this.attr.productSelect, 'stock', 0)
					this.$set(this.attr.productSelect, 'unique', '')
					this.$set(this.attr.productSelect, 'cart_num', 0)
					this.$set(this, 'attrValue', '')
					this.$set(this, 'attrTxt', '请选择')
				}
			},
			// 单独购买
			openAlone: function() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: this.storeInfo.productId,
					},
				})
				// this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
			},
			// 发起拼团
			openTeam: function() {

				var that = this
				console.log(this.attr)
				if (that.attr.cartAttr == false) { // 展示弹框
					console.log(this.attr.cartAttr)
					that.attr.cartAttr = !this.attr.cartAttr
					// 设置拼团价格
					that.attr.productSelect.price = this.storeInfo.price
				} else { // 已有弹框——初始化商品信息，下单请求
					var data = {}
					data.productId = that.storeInfo.productId
					data.price = that.storeInfo.price
					data.cartNum = that.attr.productSelect.cart_num
					data.uniqueId = that.attr.productSelect.unique
					data.combinationId = that.storeInfo.id
					data.new = 1
					console.log(data)
					postCartAdd(data)
						.then(res => {
							that.$yrouter.push({
								path: '/pages/order/OrderSubmission/index',
								query: {
									// id: res.data.cartId,
									pinkId: res.data.cartId,
								},
							})
						})
						.catch(err => {
							uni.showToast({
								title: err.msg || err.response.data.msg || err.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
				}
			},
			//打开属性插件；
			selecAttrTap: function() {
				this.attr.cartAttr = true
				this.isOpen = true
			},
		},
	}
</script>
<style scoped lang="less">
	.product-window-pt {
		bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}
	.share {
		position: absolute;
		right: 10px;
		z-index: 9;
		top: calc(var(--status-bar-height) + 70px);
	}
	.product-con .wrapper {
		padding-bottom: 0.26 * 100rpx;
	}

	.noscroll {
		height: 100%;
		overflow: hidden;
	}

	.product-con .footer-group .bnt {
		// flex:1;
		width: 43%;
	}

	.footer-group {
		button {
			border: 0;
			background: none;
		}
	}

	.product-con .footer-group .bnt.bg-color-violet {
		background-color: #fa8013;
	}

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-white__gray {
		color: rgba(255, 255, 255, 0.8);
		font-weight: normal;
		font-size: 26rpx;
	}

	.tui-color-red {
		color: #eb0909;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding-bottom: 30rpx;
	}

	.tui-price__box {
		width: 100%;
		height: 130rpx;
		display: flex;
	}

	.tui-pro-pricebox {
		width: 540rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #ffffff;
		font-size: 26rpx;
		line-height: 26rpx;
		background: linear-gradient(-30deg, rgb(31,160,120), rgb(57,209,160));
		flex-shrink: 0;
	}

	.tui-pro-price {
		display: flex;
		align-items: flex-end;
	}

	.tui-price {
		font-size: 44rpx;
		line-height: 42rpx;
	}

	.tui-sold {
		width: 100%;
		height: 44rpx;
		padding-left: 4rpx;
		display: flex;
		align-items: center;
		padding-top: 10rpx;
	}

	.tui-price-tag {
		height: 38rpx;
		border: 1rpx solid #fff;
		border-radius: 6rpx;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		line-height: 24rpx;
		transform: scale(0.8);
		transform-origin: 0 center;
		border-radius: 6rpx;
		padding: 0 8rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		text-decoration: line-through;
	}

	.tui-right__box {
		flex: 1;
		background-color: #ffffff;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #eb0909;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-guarantee__box {
		display: flex;
		padding: 12rpx 88rpx 0;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		background: #fff;
	}

	.tui-gt-item {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.tui-gt-item text {
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-gt-img {
		width: 24rpx;
		height: 26rpx;
		flex-shrink: 0;
	}

	.tui-group-text {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-group-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
		padding-left: 16rpx;
		border-left: 2px solid #eb0909;
		box-sizing: border-box;
	}

	.tui-sub__title {
		font-size: 26rpx;
		padding-right: 30rpx;
	}

	.tui-step__box {
		width: 100%;
		height: 210rpx;
		background: #fff;
		padding: 0 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tui-step-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 26rpx;
		color: #666666;
	}

	.tui-step-item image {
		width: 64rpx;
		height: 55rpx;
		flex-shrink: 0;
	}

	.tui-step-item image:first-child {
		width: 60rpx !important;
	}

	.tui-step-arrow {
		height: 90rpx;
	}

	.tui-step-arrow image {
		width: 11rpx;
		height: 20rpx;
		flex-shrink: 0;
	}

	.tui-step-text {
		line-height: 26rpx;
		padding-top: 24rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list__cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list__cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}

	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		display: flex;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}
	
	.tui-operation_margin {
		height: calc(100rpx + env(safe-area-inset-bottom));
		
	}

	.tui-operation {
		width: 100%;
		// height: calc(100rpx + env(safe-area-inset-bottom));
		height: 100rpx;
		background: rgba(255, 255, 255, 0.98);
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 100;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-operation-left {
		display: flex;
		align-items: center;
	}

	.tui-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		background: none;
		padding: 0;

		border: 0;
		line-height: 1em;

		&:after {
			display: none;
		}

		.tui-operation-text {
			margin-top: 9rpx;
			line-height: 1em;
		}
	}

	.tui-operation-text {
		font-size: 22rpx;
		color: #333;
	}

	.tui-opacity {
		opacity: 0.5;
	}

	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 100rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
	}

	.tui-img__clock {
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}

	/*底部选择弹层*/

	/*拼团玩法介绍 modal*/
	.tui-modal__title {
		text-align: center;
		font-weight: bold;
		padding-bottom: 8rpx;
	}

	.tui-modal__p {
		font-size: 26rpx;
		color: #888;
		padding-top: 20rpx;
	}

	.tui-modal__btn {
		width: 100%;
		padding: 60rpx 0 20rpx;
		display: flex;
		justify-content: center;
	}

	/*正在拼团*/
	.tui-group-swiper {
		width: 100%;
		background-color: #fff;
	}

	.tui-group-user {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
	}

	.tui-user-left {
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}

	.tui-user-left image {
		height: 80rpx;
		width: 80rpx;
		flex-shrink: 0;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.tui-user-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-user-anme {
		max-width: 160rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tui-group-num {
		font-size: 26rpx;
		line-height: 26rpx;
		padding-bottom: 12rpx;
	}

	.tui-user-countdown {
		padding-right: 18rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tui-sub-title {
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-group-countdown {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
		white-space: nowrap;
	}

	.tui-countdown-right {
		padding-right: 6rpx;
	}

	.tui-countdown-left {
		padding-left: 6rpx;
	}

	.tui-btn__box {
		height: 98rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		line-height: 28rpx;
		padding: 18rpx 0 14rpx 0;
		box-sizing: border-box;
	}

	.tui-size-26 {
		font-size: 26rpx;
		line-height: 26rpx;
		padding-top: 4rpx;
	}

	.tui-size-36 {
		font-size: 36rpx;
		line-height: 34rpx;
		font-weight: 500;
	}

	.tui-flex-end {
		display: flex;
		align-items: flex-end;
	}

	.price-shuoming {
		.price-intro {
			height: 44px;
			font-weight: 600;
			align-items: center;
			display: flex;
		}

		.text {
			font-size: 13px;
			color: #999;
			margin-bottom: 10px;
		}
	}

	.countdown {
		display: flex;
		flex-direction: column;
		color: #fff;
		font-size: 12px;

		.bg {
			background-color: #000;
			font-size: 10px;
			color: #fff;
			width: 15px;
			height: 15px;
			line-height: 15px;
			margin-right: 2px;
			text-align: center;
			border-radius: 3px;
		}
	}
	
	.author-btn {
		margin-left: 20rpx;
	  width: calc(100% - 40rpx);
	  height: 80rpx;
	  background: linear-gradient(to right, rgb(31,160,120) 0%, rgb(57,209,160) 100%);
	  background: -moz-linear-gradient(to right, rgb(31,160,120) 0%, rgb(57,209,160) 100%);
	  // box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
	  border-radius: 40rpx;
	  font-size: 30rpx;
	  font-family: PingFang SC;
	  font-weight: 500;
	  color: rgba(255, 255, 255, 1);
	}
</style>